<template>
	<el-dialog v-model="_d.visible" draggable :close-on-click-modal="false" width="800px">
		<template #header>
			<div style="color: #fff">{{_d.record ? '编辑' : '添加'}}表单</div>
		</template>
	  <el-form class="form-box" :model="_d.form" ref="formRef" label-width="auto">
			<el-form-item label="表单名称" prop="formName" :rules="[{ required: true, message: '表单名称不能为空', trigger: 'blur' }]">
				<el-input v-model="_d.form.formName" placeholder="请输入表单名称" clearable />
			</el-form-item>
			<el-form-item label="需要审核" prop="check">
				<el-checkbox v-model="_d.form.check" label="是" />
			</el-form-item>
			<el-form-item label="关联附件" prop="formfileids">
				<el-select style="width:100%;" v-model="_d.form.formfileids" placeholder="请选择" multiple>
					<el-option v-for="(item, index) in _d.fileList" :key="index"
						:label="item.fileName"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="填写说明" prop="instruction">
				<el-input v-model="_d.form.instruction" type="textarea" rows="5" placeholder="请输入填写说明" clearable />
			</el-form-item>
			<el-form-item label="备注" prop="description">
				<el-input v-model="_d.form.description" type="textarea" rows="5" placeholder="请输入备注" clearable />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">关 闭</el-button>
				<el-button type="primary" @click="save">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import {$post, $get} from '/@/utils/request';
import {useUserInfo} from "/@/stores/userInfo.ts";
import {editRemoveKey} from "../template.js";

const emits = defineEmits(['reload']);

const oUserInfo = useUserInfo();
const formRef = ref();

const _d = reactive({
	visible: false,
	record: null,

	form: {
		formName: '',
		check: '',
		instruction: '',
		description: '',
		formfileids: []
	},

	fileList: []
});

onMounted(async () => {
	
});

// 打开弹窗
const open = (record) => {
	_d.record = record || null;
	if(record) {
		_d.form.formName = record.formName;
		_d.form.check = record.check ? true : false;
		_d.form.instruction = record.instruction;
		_d.form.description = record.description;
		_d.form.formfileids = record.formFileIds ? JSON.parse(record.formFileIds) : [];
	} else {
		_d.form.formName = '';
		_d.form.check = false;
		_d.form.instruction = '';
		_d.form.description = '';
		_d.form.formfileids = [];
	}
	_d.visible = true;

	getFileList();
};

// 获取附件列表
const getFileList = async () => {
	var res = await $get('/projectService/gettemplatefiles/0');
	_d.fileList = res.result.map(item => {
		item.fileName = item.fileName+item.suffix;
		return item;
	});
}

// 取消
const cancel = () => {
	_d.visible = false;
};

// 保存
const save = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return;
		if(!_d.record) {
			addSave();
		} else {
			editSave();
		}
	})
}

const addSave = () => {
	let params = {
		formTemplate: {
			formName: _d.form.formName,
			check: _d.form.check,
			instruction: _d.form.instruction,
			description: _d.form.description,
			content: '',
			isTemplate: true
		},
		formfileids: _d.form.formfileids?.length ? _d.form.formfileids : null,
	}
	$post('/projectTemplateModule/addformtemplate', params).then(res => {
		ElNotification({
	    title: '提示',
	    message: '添加成功',
	    type: 'success',
	  })
	  emits('reload');
	  _d.visible = false;
	})
}

const editSave = () => {
	let params = {
		formTemplate: {
			id: _d.record.id,
			formName: _d.form.formName,
			check: _d.form.check,
			instruction: _d.form.instruction,
			description: _d.form.description,
		},
		formfileids: _d.form.formfileids?.length ? _d.form.formfileids : null,
	}
	$post('/projectTemplateModule/modifyformtemplate', params).then(res => {
		ElNotification({
	    title: '提示',
	    message: '编辑成功',
	    type: 'success',
	  })
	  emits('reload');
	  _d.visible = false;
	})
}

// 导出对象
defineExpose({ open });

</script>
<style lang="scss" scoped>
.form-box {
	min-height: 150px;
}
</style>
